<template>
  <div class="box" ref="target">我来了</div>
</template>

<script>
import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'
export default {
  setup () {
    const target = ref(null)
    const targetIsVisible = ref(false)
    // 用于检测元素可见性的函数
    const { stop } = useIntersectionObserver(
      target,
      ([{ isIntersecting }]) => {
        if (isIntersecting) {
          console.log('发送请求')
          // 发了一次请求后，停止检查
          stop()
        }
      }
    )

    return {
      target,
      targetIsVisible
    }
  }
}
</script>

<style lang="less" scoped>
.box{
    width: 200px;
    height: 200px;
    background-color: pink;
}
</style>
